

import {
        createElement,
        render,
        renderDom,
        setAttrs
      } from './virtualDom';
import diff from './diff';
import doPatch from './doPatch';

let vDom = createElement('ul',
    {
        class: 'list',
        style:'width: 300px; height: 300px; background-color: orange'
    },
    [
        createElement('li',
            {class: 'item', 'data-index':0 },
            [
                createElement('p', {class:'text'},['第1个选项'])
            ]),

        createElement('li',
            {class: 'item', 'data-index':1 },
            [
                createElement('p', {class:'text'},[
                    createElement('span', {
                        class: 'text'
                    }, [
                        '第2个列表选项'
                    ])
                ])
            ]
        ),

        createElement('li',
            {class: 'item', 'data-index':2 },
            ['第3个列表选项']
        )
    ]
);

let vDom2 = createElement('ul',
    {
        class: 'list-wrap',
        style:'width: 300px; height: 300px; background-color: orange'
    },
    [
        createElement('li',
            {class: 'item', 'data-index':0 },
            [
                createElement('p', {class:'title'},['特殊选项'])
            ]),

        createElement('li',
            {class: 'item', 'data-index':1 },
            [
                createElement('p', {class:'text'},[
                   '第二选项'
                ])
            ]
        ),

        createElement('li',
            {class: 'item', 'data-index':2 },
            ['第333个列表选项12']
        )
    ]
);


const rDom = render(vDom);
const App = document.querySelector('#app');
renderDom(rDom, App);

const patches =  diff(vDom,vDom2);

console.log(patches);
// 实现差异
doPatch(rDom,patches)

